<script setup lang="ts">
import { ref } from "vue";
import { useSystemStore } from "@/hooks/usePinia";
import userInfo from "./UserInfo.vue";

const systemOpt = useSystemStore();
</script>

<template>
  <div class="nav horizontal-layout">
    <div class="nav-left horizontal-layout">
      <el-button
        class="nav-left__menu--btn"
        type=""
        @click="systemOpt.changeMenuType()"
        >{{ systemOpt.menuOpen ? "收缩" : "扩展" }}
      </el-button>
      <h1 class="nav-left__page-name">{{ systemOpt.pageName }}</h1>
    </div>
    <div class="nav-right horizontal-layout">
      <user-info></user-info>
    </div>
  </div>
</template>

<style scoped lang="scss">
.nav {
  padding: 10px;
  justify-content: space-between;
  border-bottom: 1px solid #d8dce5;
  &-left {
    &__page-name {
      margin-left: 1rem;
    }
  }
}
</style>
